<template>
    <ElTable class="list-table is-border" height="720" :="$attrs" border :data="data">
        <ElTableColumn label="记录详情" align="center" width="65">
            <template #default="{ row }">
                <div>
                    <div @click="openGjjlDetails(row)">
                        <span class="fileNameClass">查看</span>
                    </div>
                </div>
            </template>
        </ElTableColumn>
        <ElTableColumn label="当前填充率" prop="tcl" align="center">
            <template #default="{ row }">
                {{ row.tcl }}%
            </template>
        </ElTableColumn>
        <ElTableColumn label="总跟进记录数" prop="zgjjls" align="center">
            <template #default="{ row }">
                {{ row.zgjjls }}
            </template>
        </ElTableColumn>
        <ElTableColumn label="客户类型" prop="zxkhlxName" align="center" width="85"></ElTableColumn>
        <ElTableColumn label="拓客渠道" prop="zxtkqdName" align="center" width="110"></ElTableColumn>
        <ElTableColumn label="客户名称" prop="zxkhmc" width="150"></ElTableColumn>
        <ElTableColumn label="客户有效性" prop="khyxxName" align="center" width="105"></ElTableColumn>
        <ElTableColumn label="店铺平台" prop="zxdpptName" align="center" width="55"></ElTableColumn>
        <ElTableColumn label="店铺名称" prop="zxdpmc" width="150"></ElTableColumn>
        <ElTableColumn label="店铺类目" prop="zxdplmName" align="center" width="175"></ElTableColumn>
        <ElTableColumn label="店铺等级" prop="zxdpdjName" align="center" width="55"></ElTableColumn>
        <ElTableColumn label="业务条线" prop="zxywtxName" align="center" width="65"></ElTableColumn>
        <ElTableColumn label="业务类型" prop="zxywlxName" align="center" width="120"></ElTableColumn>
        <ElTableColumn label="服务班次" prop="zxfwbcName" align="center" width="120"></ElTableColumn>
        <ElTableColumn label="收费模式" prop="zxsfmsName" align="center" width="85"></ElTableColumn>
        <ElTableColumn label="是否报价" prop="sfbjName" align="center" width="55"></ElTableColumn>
        <ElTableColumn label="报价金额" prop="bjje" align="center" width="85"></ElTableColumn>
        <ElTableColumn label="联系人" prop="zxlxr" align="center" width="85"></ElTableColumn>
        <ElTableColumn label="联系人手机号" prop="lxrsjh" align="center" width="120"></ElTableColumn>
        <ElTableColumn label="咨询日期" prop="zxrq" align="center" width="105"></ElTableColumn>
        <ElTableColumn label="公司对接人" prop="gsdjrUserName" align="center" width="105"></ElTableColumn>
        <ElTableColumn label="当前节点" prop="dqjdName" align="center" width="85"></ElTableColumn>
        <!-- 
        <ElTableColumn label="跟进时间" prop="gjsj" align="center" width="120"></ElTableColumn>
        <ElTableColumn label="跟进方式" prop="gjfsName" align="center" width="120"></ElTableColumn> -->

        <ElTableColumn label="其它联系方式" prop="qtlxfs">
            <template #default="{ row }">
                <div class="ellipsis-cell">{{ row.qtlxfs }}</div>
            </template>
        </ElTableColumn>
        <ElTableColumn label="重要程度" prop="zycd" align="center" width="55"></ElTableColumn>
        <ElTableColumn label="报价明细及其他" prop="bjmxjqt" width="200">
            <template #default="{ row }">
                <div class="ellipsis-cell">{{ row.bjmxjqt }}</div>
            </template>
        </ElTableColumn>
        <ElTableColumn label="店铺城市" prop="zxdpcs" align="center" width="85"></ElTableColumn>
        <ElTableColumn label="店铺客单" prop="zxdpkdName" align="center" width="85"></ElTableColumn>
        <ElTableColumn label="店铺销量" prop="zxdpxlName" align="center" width="55"></ElTableColumn>
        <ElTableColumn label="店铺分类" prop="zxdpflName" align="center" width="70"></ElTableColumn>
        <ElTableColumn label="咨询量(日均)" prop="zxl" align="center" width="85"></ElTableColumn>
        <ElTableColumn label="转化率(%)" prop="zhl" align="center" width="85"></ElTableColumn>
        <ElTableColumn label="平均响应" prop="pjxy" align="center" width="55"></ElTableColumn>
        <ElTableColumn label="满意度(%)" prop="myd" align="center" width="85"></ElTableColumn>
        <ElTableColumn label="退款时长" prop="tksc" align="center" width="55"></ElTableColumn>

        <!-- 
        <ElTableColumn prop="_action" label="操作" fixed="right" :min-width="90" header-align="center" align="center">
            <template #default="{ row }">
                <ElButton type="primary" link @click="$emit('edit-records', row)">编辑</ElButton>
                <ElButton type="primary" link @click="openGjjl(row)">跟进</ElButton>
            </template>
        </ElTableColumn> 
        -->
    </ElTable>

    <!-- 
    <ElDialog v-model="gjjlObj.isShow" title="跟进记录" width="90%">
        <div style="display: flex; justify-content: flex-end; margin-bottom: 10px;">
            <ElButton type="primary" @click="openAddGjjl">添加跟进记录</ElButton>
        </div>
        <ElTable class="list-table is-border" height="700" :="$attrs" :data="gjjlList" border>
            <ElTableColumn label="序号" width="60" align="center">
                <template #default="{ $index }">
                    {{ $index + 1 }}
                </template>
            </ElTableColumn>
            <ElTableColumn label="填充率" prop="tcl">
                <template #default="{ row }">
                    {{ row.tcl }}%
                </template>
            </ElTableColumn>
            <ElTableColumn label="客户类型" prop="zxkhlxName" align="center" width="85"></ElTableColumn>
            <ElTableColumn label="拓客渠道" prop="zxtkqdName" align="center" width="110"></ElTableColumn>
            <ElTableColumn label="客户名称" prop="zxkhmc" width="150"></ElTableColumn>
            <ElTableColumn label="客户有效性" prop="khyxxName" align="center" width="105"></ElTableColumn>
            <ElTableColumn label="店铺平台" prop="zxdpptName" align="center" width="55"></ElTableColumn>
            <ElTableColumn label="店铺名称" prop="zxdpmc" width="150"></ElTableColumn>
            <ElTableColumn label="店铺类目" prop="zxdplmName" align="center" width="175"></ElTableColumn>
            <ElTableColumn label="店铺等级" prop="zxdpdjName" align="center" width="55"></ElTableColumn>
            <ElTableColumn label="业务条线" prop="zxywtxName" align="center" width="65"></ElTableColumn>
            <ElTableColumn label="业务类型" prop="zxywlxName" align="center" width="120"></ElTableColumn>
            <ElTableColumn label="服务班次" prop="zxfwbcName" align="center" width="120"></ElTableColumn>
            <ElTableColumn label="收费模式" prop="zxsfmsName" align="center" width="85"></ElTableColumn>
            <ElTableColumn label="是否报价" prop="sfbjName" align="center" width="55"></ElTableColumn>
            <ElTableColumn label="报价金额" prop="bjje" align="center" width="85"></ElTableColumn>
            <ElTableColumn label="联系人" prop="zxlxr" align="center" width="85"></ElTableColumn>
            <ElTableColumn label="联系人手机号" prop="lxrsjh" align="center" width="120"></ElTableColumn>
            <ElTableColumn label="咨询日期" prop="zxrq" align="center" width="105"></ElTableColumn>
            <ElTableColumn label="公司对接人" prop="gsdjrUserName" align="center" width="105"></ElTableColumn>
            <ElTableColumn label="当前节点" prop="dqjdName" align="center" width="85"></ElTableColumn>
            <ElTableColumn label="跟进时间" prop="gjsj" align="center" width="120"></ElTableColumn>
            <ElTableColumn label="跟进方式" prop="gjfsName" align="center" width="120"></ElTableColumn>
            <ElTableColumn label="其它联系方式" prop="qtlxfs">
                <template #default="{ row }">
                    <div class="ellipsis-cell">{{ row.qtlxfs }}</div>
                </template>
            </ElTableColumn>
            <ElTableColumn label="重要程度" prop="zycd" align="center" width="55"></ElTableColumn>
            <ElTableColumn label="报价明细及其他" prop="bjmxjqt" width="200">
                <template #default="{ row }">
                    <div class="ellipsis-cell">{{ row.bjmxjqt }}</div>
                </template>
            </ElTableColumn>
            <ElTableColumn label="店铺城市" prop="zxdpcs" align="center" width="85"></ElTableColumn>
            <ElTableColumn label="店铺客单" prop="zxdpkdName" align="center" width="85"></ElTableColumn>
            <ElTableColumn label="店铺销量" prop="zxdpxlName" align="center" width="55"></ElTableColumn>
            <ElTableColumn label="店铺分类" prop="zxdpflName" align="center" width="70"></ElTableColumn>
            <ElTableColumn label="咨询量(日均)" prop="zxl" align="center" width="85"></ElTableColumn>
            <ElTableColumn label="转化率(%)" prop="zhl" align="center" width="85"></ElTableColumn>
            <ElTableColumn label="平均响应" prop="pjxy" align="center" width="55"></ElTableColumn>
            <ElTableColumn label="满意度(%)" prop="myd" align="center" width="85"></ElTableColumn>
            <ElTableColumn label="退款时长" prop="tksc" align="center" width="55"></ElTableColumn>

            <ElTableColumn prop="_action" label="操作" fixed="right" :min-width="90" header-align="center" align="center">
                <template #default="{ row }">
                    <ElButton type="primary" link @click="openEditGjjl(row)">编辑</ElButton>
                    <ElButton type="primary" link @click="openFj(row)">附件</ElButton>
                </template>
            </ElTableColumn>
        </ElTable>
    </ElDialog>
    -->

    <!-- 
    <FileDialog :fjObj="fjObj"></FileDialog>
    -->

    <GjjlDetails :gjjlDetailsObj="gjjlDetailsObj" @sx-zxjl-list="sxZxjlList"></GjjlDetails>

</template>

<script setup lang="ts">
import { ElTableColumn, ElDialog, UploadInstance } from 'element-plus';
import { onMounted, reactive, ref, watch } from 'vue'
import { getGjListByZxId } from '../api';
import { gjjlDialog } from '../dialog/consultationRecordsDialog'
import FileDialog from '@/views/menus/n-ykf-file/components/FileDialog.vue'
import GjjlDetails from '@/views/menus/n-consultation-gjjl/components/GjjlDetails.vue'

const gjjlObj = reactive({
    isShow: false
});

const fjObj = reactive({
    isShow: false,
    gjjlId: '',
    mklx: ''
});

const zxid = ref();
const gjjlList = ref([])

const emit = defineEmits(['edit-records', 'close-gjjl-dialog', 'sx-zxjl-list'])

defineProps({
    data: {
        type: Array,
        default: () => [],
    },
    hiddenColumns: {
        type: Object,
        default: () => ({}),
    },
});

const gjjlDetailsObj = reactive({
    isShow: false,
    zxid: ''
});

// 打开跟进记录页面
const openGjjl = async (row) => {
    console.log(row);
    zxid.value = row.zxid;
    let res = await getGjListByZxId(row);
    gjjlList.value = res;
    console.log(gjjlList.value);
    gjjlObj.isShow = true;
}

// 打开新增跟进记录页面
const openAddGjjl = async () => {
    await gjjlDialog.title('新增跟进记录').open({ row: { isAdd: true, zxid: zxid.value } })
    let row = { zxid: zxid.value }
    let res = await getGjListByZxId(row);
    gjjlList.value = res;
}

// 打开修改跟进记录页面
const openEditGjjl = async (row) => {
    await gjjlDialog.title('编辑跟进记录').open({ row })
    let res = await getGjListByZxId(row);
    gjjlList.value = res;
}

// 打开附件页面
const openFj = async (row) => {
    // 传过去mklx以及glId
    fjObj.isShow = true;
    fjObj.gjjlId = row.gjjlId;
    fjObj.mklx = 'gjjl';
}

const openGjjlDetails = async (row) => {
    gjjlDetailsObj.zxid = row.zxid;
    gjjlDetailsObj.isShow = true;
}

const sxZxjlList = async () => {
    console.log('父页面执行');
    emit('sx-zxjl-list');
}

onMounted(() => {

});

// 监听 gjjlObj.isShow 的变化
watch(() => gjjlObj.isShow, (newVal, oldVal) => {
    if (oldVal === true && newVal === false) {
        // 触发事件通知父组件
        emit('close-gjjl-dialog')
    }
})
</script>

<style scoped lang="scss">
.ellipsis-cell {
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    max-width: 200px;
    /* 设置一个最大宽度，根据需要调整 */
}

:deep(.centered-input .el-input__inner) {
    text-align: center;
}

.fileNameClass {
    color: #094DB2;
    /* 设置字体颜色 */
    text-decoration: none;
    /* 默认无下划线 */
    cursor: pointer;
    /* 鼠标悬停时显示小手 */

    /* 鼠标悬停时的样式 */
    &:hover {
        text-decoration: underline;
        /* 添加下划线 */
    }
}
</style>